$(() => {

    //导航栏
    $(`
        <nav>
            <div id="top-nav">
                <div id="logo1"></div>
                <div id="nav1" class="menu">
                    <div class="submenu" style="display: none;">
                        <a href="../../main/headline/info.html">果园传真</a>
                        <a href="../../main/headline/scene.html">四季美景</a>
                        <a href="../../main/headline/variety.html">水果品种</a>
                        <a href="../../main/headline/honor.html">荣誉奖项</a>
                        <a href="../../main/headline/leader.html">领导关怀</a>
                    </div>
                </div>
                <div id="nav2">
                </div>
                <div id="nav3" class="menu">
                    <div class="submenu" style="display: none;">
                        <a href="../../main/develop/protect.html">绿色防控</a>
                        <a href="../../main/develop/industry.html">苗木产业</a>
                        <a href="../../main/develop/revitalization.html">乡村振兴</a>
                    </div>
                </div>
                <div id="nav4" class="menu">
                    <div class="submenu" style="display: none;">
                        <a href="../../main/contact/shop.html">网上商城</a>
                        <a href="../../main/contact/customization.html">定制农场</a>
                        <a href="../../main/contact/broadcast.html">可视化果园</a>
                        <a href="../../main/contact/consult.html">园丁在线</a>
                    </div>
                </div>
                <div id="logo2"></div>
            </div>

            <div id="left-nav">
                <header>
                    <button class="btn-primary">
                        <svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round"
                            stroke-linejoin="round" class="h-6 w-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                            <line x1="3" y1="12" x2="21" y2="12"></line>
                            <line x1="3" y1="6" x2="21" y2="6"></line>
                            <line x1="3" y1="18" x2="21" y2="18"></line>
                        </svg>
                    </button>
                    <div class="text">鹏宇果园</div>
                    <div class="logo"></div>
                </header>
                <div class="select-layout" style="display: none;">
                    <div class="select">
                        <div id="nav1" class="menuitem">
                            <div class="parentmenu">首页</div>
                        </div>
                        <div class="menuitem">
                            <div class="parentmenu">果园头条</div>
                            <div style="display: none;">
                                <a href="../../main/headline/info.html">果园传真</a>
                                <a href="../../main/headline/scene.html">四季美景</a>
                                <a href="../../main/headline/variety.html">水果品种</a>
                                <a href="../../main/headline/honor.html">荣誉奖项</a>
                                <a href="../../main/headline/leader.html">领导关怀</a>
                            </div>
                        </div>
                        <div id="nav2" class="menuitem">
                            <div class="parentmenu">数字化果园</div>
                        </div>
                        <div class="menuitem">
                            <div class="parentmenu">果然有料</div>
                            <div style="display: none;">
                                <a href="../../main/develop/protect.html">绿色防控</a>
                                <a href="../../main/develop/industry.html">苗木产业</a>
                                <a href="../../main/develop/revitalization.html">乡村振兴</a>
                            </div>
                        </div>
                        <div class="menuitem">
                            <div class="parentmenu">共享生态</div>
                            <div style="display: none;">
                                <a href="../../main/contact/shop.html">网上商城</a>
                                <a href="../../main/contact/customization.html">定制农场</a>
                                <a href="../../main/contact/broadcast.html">可视化果园</a>
                                <a href="../../main/contact/consult.html">园丁在线</a>
                            </div>
                        </div>
                    </div>
                    <div class="nav-mark"></div>
                </div>
            </div>
        </nav>
    `).prependTo("#fullpage");

    //页脚
    $(`
        <div class="section fp-auto-height">
            <hr class="hr"/>
            <footer>
                <div id="footer1">
                    <div id="footer1-1">广西桂林鹏宇兄弟</div>
                    <div id="footer1-2">柑桔产业开发有限公司</div>
                </div>
                <div id="footer2">
                    <div id="footer2-1">
                        <div id="footer2-1-1">联系我们</div>
                        <div id="footer2-1-2">
                            <div id="footer2-1-2-1">客服热线：</div>
                            <div id="footer2-1-2-2"></div>
                            <div id="footer2-1-2-3">0773-8216767</div>
                        </div>
                    </div>
                    <div id="footer2-2">
                        <div>地址：广西桂林恭城瑶族自治县山水国际社区14栋903室</div>
                        <div>邮箱：pyborther@163.com</div>
                        <div>传真：0773-8216767</div>
                        <div>京ICP备案号：15020948号-1</div>
                    </div>
                </div>
                <div id="footer3">
                    <div id="footer3-1">关注我们</div>
                    <div id="footer3-2">
                        <div id="footer3-2-1">
                            <div id="footer3-2-1-1"></div>
                            <div id="footer3-2-1-2"></div>
                            <div id="footer3-2-1-3">公众号</div>
                        </div>
                        <div id="footer3-2-2">
                            <div id="footer3-2-2-1"></div>
                            <div id="footer3-2-2-2"></div>
                            <div id="footer3-2-2-3">农夫热线</div>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    `).appendTo("#fullpage");

    //侧边栏
    $(`
        <div id="contact">
            <div id="contact1" class="contact">
                <svg class="svg-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1364">
                    <path
                        d="M767.818667 409.173333C867.338667 444.266667 938.666667 539.136 938.666667 650.666667c0 42.709333-10.496 83.978667-30.261334 120.842666-1.792 3.338667-4.992 8.928-9.696 16.96l14.613334 53.557334c6.506667 23.893333-15.402667 45.813333-39.296 39.296l-53.642667-14.634667-6.229333 3.669333A254.933333 254.933333 0 0 1 682.666667 906.666667c-77.994667 0-147.84-34.88-194.805334-89.888a352.608 352.608 0 0 1-56.64 4.554666c-63.338667 0-124.266667-16.853333-177.472-48.298666-1.834667-1.088-6.410667-3.733333-13.632-7.893334l-80.544 21.653334c-23.914667 6.432-45.76-15.573333-39.146666-39.434667l21.792-78.752a961.205333 961.205333 0 0 1-15.904-27.317333A336.384 336.384 0 0 1 85.333333 480c0-188.618667 154.965333-341.333333 345.888-341.333333 159.914667 0 297.984 108.010667 335.818667 259.296 0.949333 3.765333 1.173333 7.552 0.778667 11.2z m-68.106667-13.952C662.88 282.037333 555.178667 202.666667 431.221333 202.666667 275.434667 202.666667 149.333333 326.933333 149.333333 480c0 46.272 11.498667 90.837333 33.194667 130.698667 2.88 5.290667 10.176 17.706667 21.621333 36.746666a32 32 0 0 1 3.413334 25.013334l-10.517334 37.994666 39.232-10.549333a32 32 0 0 1 24.234667 3.146667c14.272 8.192 22.773333 13.098667 25.802667 14.890666A283.882667 283.882667 0 0 0 431.221333 757.333333c6.154667 0 12.288-0.192 18.389334-0.576A255.061333 255.061333 0 0 1 426.666667 650.666667c0-141.386667 114.613333-256 256-256 5.728 0 11.413333 0.192 17.045333 0.554666z m133.706667 397.056a32 32 0 0 1 3.338666-24.725333 996.672 996.672 0 0 0 15.242667-26.293333A190.997333 190.997333 0 0 0 874.666667 650.666667c0-106.037333-85.962667-192-192-192s-192 85.962667-192 192 85.962667 192 192 192a190.933333 190.933333 0 0 0 98.570666-27.2c2.208-1.322667 8.288-4.874667 18.517334-10.837334a32 32 0 0 1 24.522666-3.210666l12.565334 3.424-3.424-12.565334zM330.666667 426.666667a42.666667 42.666667 0 1 1 0-85.333334 42.666667 42.666667 0 0 1 0 85.333334z m192 0a42.666667 42.666667 0 1 1 0-85.333334 42.666667 42.666667 0 0 1 0 85.333334z m85.333333 202.666666a32 32 0 1 1 0-64 32 32 0 0 1 0 64z m149.333333 0a32 32 0 1 1 0-64 32 32 0 0 1 0 64z"
                        fill="#ffffff" p-id="1365"></path>
                </svg>
                <div>微信咨询</div>
                <div id="info1" class="info" style="display: none;">
                    <div>公众号</div>
                    <div class="qc"></div>
                </div>
            </div>
            <div id="contact2" class="contact">
                <svg class="svg-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="627">
                    <path
                        d="M446.272 573.44a509.653333 509.653333 0 0 1-81.92-100.650667c67.786667-30.474667 112.138667-93.461333 112.138667-169.792C476.48 194.592 388.96 106.666667 280.906667 106.666667 170.058667 106.666667 85.333333 188.746667 85.333333 302.997333c0 158.250667 82.56 328.554667 200.618667 439.658667 100.010667 94.122667 258.986667 161.738667 413.461333 174.570667 0.832 0.074667 1.674667 0.106667 2.517334 0.106666h41.162666a30.517333 30.517333 0 0 0 0-61.045333h-39.872c-140.672-11.978667-286.026667-73.930667-375.456-158.090667-106.410667-100.16-181.408-254.837333-181.408-395.2 0-80.106667 56.981333-135.285333 134.549334-135.285333 74.282667 0 134.549333 60.533333 134.549333 135.285333 0 60.309333-40.896 107.989333-103.008 123.349334a30.517333 30.517333 0 0 0-19.786667 43.658666c27.573333 53.312 66.037333 104.426667 111.573334 147.690667 51.264 48.693333 109.941333 86.112 172.053333 108.16a30.506667 30.506667 0 0 0 40.362667-24.064c10.453333-67.093333 61.621333-114.026667 126.442666-114.026667 74.272 0 134.549333 60.544 134.549334 135.285334 0 25.578667-7.04 50.026667-20.149334 71.253333a30.528 30.528 0 0 0 51.925334 32.074667A196.096 196.096 0 0 0 938.666667 723.050667c0-108.394667-87.530667-196.330667-195.573334-196.330667-83.072 0-151.210667 52.384-177.621333 128.864-42.368-19.552-82.773333-47.541333-119.2-82.144z"
                        fill="#ffffff" p-id="628"></path>
                </svg>
                <div>电话咨询</div>
                <div id="info2" class="info" style="display: none;">
                    <div>联系电话</div>
                    <div>0773-8216767</div>
                </div>
            </div>
        </div>
    `).prependTo("body");

    //顶导航栏

    //更新导航栏高度
    let adaptNavHeight = () => {
        $("#top-nav #logo1").height($("#top-nav #logo1").width() / 353 * 200);
        $("#top-nav #nav1").height($("#top-nav #nav1").width() / 101 * 49);
        $("#top-nav #nav2").height($("#nav2").width() / 76 * 30);
        $("#top-nav #nav3").height($("#top-nav #nav3").width() / 58 * 22);
        $("#top-nav #nav4").height($("#top-nav #nav4").width() / 174 * 87);
        $("#top-nav #logo2").height($("#top-nav #logo2").width() / 60 * 51);
    };

    adaptNavHeight();

    $(window).on("resize", () => {
        adaptNavHeight();
        if ($(window).width() > 900) {
            $("#left-nav .select-layout").hide();
            $("#left-nav .parentmenu").next().hide();
        }
    })

    $("#top-nav #nav2").on("click", () => {
        location.href = "../../main/develop/digital.html";
    });

    $("#top-nav #logo1").on("click", () => {
        location.href = "../../index.html";
    });

    $("#top-nav #logo2").on("click", () => {
        location.href = "../../index.html";
    });

    $("#top-nav .menu").on("click", (l) => {
        $(l.target).children().toggle();
        $(l.target).index("#top-nav .menu");
        $("#top-nav .submenu").each((index, e) => {
            if ($(l.target).index("#top-nav .menu") != index && !$(e).hasClass("none")) {
                $(e).hide();
            }
        });
    });

    $("body").on("click", (e) => {
        if (!$(e.target).is("#top-nav .menu")) {
            $("#top-nav .submenu").each((index, e) => {
                $(e).hide();
            });
        }
    })

    //测导航栏

    $("#left-nav .btn-primary").on("click", () => {
        $("#left-nav .select-layout").show();
        $("#contact").hide();
    });

    $("#left-nav .nav-mark").on("click", () => {
        $("#left-nav .select-layout").hide();
        $("#left-nav .parentmenu").next().hide();
        $("#contact").show();
    });

    $("#left-nav #nav1").on("click", () => {
        location.href = "../../index.html";
    });

    $("#left-nav #nav2").on("click", () => {
        location.href = "../../main/develop/digital.html";
    });

    $("#left-nav .parentmenu").on("click", (e) => {
        $(e.target).next().toggle();
    });

    $("#left-nav .select-layout").on("mousewheel", (e) => {
        e.stopPropagation();
    })

    //侧边栏效果
    $("#contact1").hover(
        () => {
            $("#info1").show();
        },
        () => {
            $("#info1").hide();
        });

    $("#contact2").hover(
        () => {
            $("#info2").show();
        },
        () => {
            $("#info2").hide();
        });

    //添加跳转
    let addClickLink = (element, link) => {
        element.css({
            "cursor": "pointer"
        });
        //检测滑动
        let mousedownX, mousedownY;
        let mouseupX, mouseupY;
        element.mousedown((e) => {
            mousedownX = e.offsetX;
            mousedownY = e.offsetY;
        });
        element.mouseup((e) => {
            mouseupX = e.offsetX;
            mouseupY = e.offsetY;
            if (Math.abs(mousedownX - mouseupX) < 10 && Math.abs(mousedownY - mouseupY) < 10) {
                location.href = "../../" + link;
            }
        });
    };

    addClickLink($("#footer2-1-2"), "main/contact/consult.html");
})